<template>
<div class="wrapper">
    <div class="container-fluid">
        <div class="page-title-box">
            <div class="btn-group ">
                <ol class="breadcrumb hide-mobile p-0 m-0">
                    <li class="breadcrumb-item">
                        <router-link to="/">{{$t('breadcrumb.index')}}</router-link>
                    </li>
                    <li class="breadcrumb-item active">{{$t('breadcrumb.promotion.my')}}</li>
                </ol>
            </div>
        </div>
        <div class="row justify-content-center">
            <div id="main" class="card-box col-12">
                <table id="tree" class="table table-borderless table-hover table-sm">
                    <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import 'jquery.fancytree/dist/skin-lion/ui.fancytree.min.css'
import fancytree from 'jquery.fancytree';
import 'jquery.fancytree/dist/modules/jquery.fancytree.table'

export default {
    name: "subordinate",
    data() {
        return {
            tree: null,
            t: {
                "customer": this.$t('label.role.customer'),
                "broker": this.$t('label.role.broker'),
                "level1": this.$t('label.broker.level.1'),
                "level2": this.$t('label.broker.level.2'),
                "level3": this.$t('label.broker.level.3'),
                "level4": this.$t('label.broker.level.4'),
                "me": this.$t('label.me'),
                "balance": this.$t('label.balance.info')
            }
        }
    },
    created() {
        this.$nextTick(() => this.initTree());
    },
    methods: {
        initTree() {
            const vm = this;
            let api = this.api,
                types = {
                    '1': vm.t.customer,
                    '2': vm.t.broker
                },
                levels = {
                    '': '',
                    '1': vm.t.level1,
                    '2': vm.t.level2,
                    '3': vm.t.level3,
                    '4': vm.t.level4
                },
                user = this.$store.state.user,
                token = user.token,
                myLevel = levels[user.level] || '',
                myType = types[user.user_type] || '',
                myDate = ' ' + user.create_time || '';
            if (user.user_type === '1') myLevel = '';

            this.tree = fancytree.createTree('#tree', {
                extensions: ["table"],
                clickFolderMode: 3,
                source: [{
                    key: '',
                    title: vm.t.me + '(' + myLevel + myType + myDate + ')',
                    folder: true,
                    lazy: true,
                    icon: 'mdi mdi-account'
                }],
                renderColumns: function (event, data) {
                    let node = data.node,
                        $td = $(node.tr).find(">td"),
                        userId = node.key ? '?user_id=' + node.key : '';
                    let html = '<a href="#/subordinate/info' + userId + '" class="router-link-active btn btn-gradient btn-sm">' + vm.t.balance + '</a>';
                    $td.eq(1).html(html)
                },
                lazyLoad: function (event, data) {
                    data.result = {
                        url: api + 'UserInfo/superior',
                        data: {
                            user_id: data.node.key,
                            token: token
                        },
                        cache: true
                    }
                },
                postProcess: function (event, data) {
                    let response = data.response;
                    if ('0' === response.code) {
                        let rs = [];
                        for (let i = 0; i < response.data.length; i++) {
                            let type = types[response.data[i].user_type],
                                level = levels[response.data[i].level],
                                date = ' ' + response.data[i].create_time,
                                title = response.data[i].user_login + '(' + level + type + date + ')',
                                folder = +response.data[i].soncount,
                                key = response.data[i].id,
                                icon = folder ? 'mdi mdi-account' : 'mdi mdi-account-outline';
                            rs.push({key, title, folder, lazy: folder, icon})
                        }
                        data.result = rs;
                    } else {
                        data.result = {
                            error: 'Error'
                        }
                    }
                }
            })
        }
    }
}
</script>
<route-meta>
{
"password": true
}
</route-meta>
